<!--
 * @Author: humengchuan 531537052@qq.com
 * @Date: 2024-05-06 16:34:44
 * @LastEditors: humengchuan 531537052@qq.com
 * @LastEditTime: 2024-06-27 15:47:56
 * @FilePath: \project\node-project\website-admin\src\views\login\index.vue
 * @Description: 注册登录页
-->
<template>
    <div class="login-page">
        <!-- <ParticalPage /> -->
        <StarSky />
        <div class="login-warp">
            <h3 class="title">{{ titleText ? '登录' : '注册' }}</h3>

            <el-form ref="ruleFormRef" style="max-width: 320px" :model="ruleForm" status-icon :rules="rules"
                label-width="auto" class="demo-ruleForm">
                <el-form-item label="账号" prop="username">
                    <el-input v-model="ruleForm.username" type="text" autocomplete="off" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
                </el-form-item>

                <el-form-item class="button-group">
                    <el-button type="primary" v-if="titleText" @click="submitForm(ruleFormRef)">
                        登录
                    </el-button>
                    <el-button type="primary" v-if="!titleText" @click="submitForm(ruleFormRef)">
                        注册
                    </el-button>
                    <el-button @click="register(ruleFormRef)">{{ !titleText ? '返回' : '注册' }}</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { registerApi, loginApi } from '@/api'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
// import ParticalPage from './particleBackground.vue'
import StarSky from './StarSky.vue'
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'



const titleText = ref(true)
const router = useRouter()

const ruleFormRef = ref<FormInstance>()


const validateUersName = (rule: any, value: any, callback: any) => {
    console.log('%c [ rule ]-78', rule)
    if (value === '') {
        callback(new Error('请输入账号'))
    } else {
        // if (ruleForm.password !== '') {
        //     if (!ruleFormRef.value) return
        //     ruleFormRef.value.validateField('passWord')
        // }
        callback()
    }
}
const validatePassWord = (rule: any, value: any, callback: any) => {
    console.log('%c [ rule ]-90', rule)
    if (value === '') {
        callback(new Error('请输入密码'))
    } else {
        callback()
    }
}

const ruleForm = reactive({
    username: '',
    password: ''
})

const rules = reactive<FormRules<typeof ruleForm>>({
    username: [{ validator: validateUersName, trigger: 'blur' }],
    password: [{ validator: validatePassWord, trigger: 'blur' }]
})

const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
        if (valid) {
            console.log('submit!')
            titleText.value ? loginFunc() : registerFunc()
        }
    })
}

// 登录
const loginFunc = async () => {
    let res = await loginApi(ruleForm) as any
    console.log('%c [ res ]-100', 'font-size:13px; background:pink; color:#bf2c9f;', res)
    if (res.code === 200) {
        localStorage.setItem('token', res.data.token)
        ElMessage({
            message: '登录成功',
            type: 'success'
        })
        router.push('/')
    } else {
        localStorage.removeItem('token')
        ElMessage({
            message: `登录失败: ${res.msg}}`,
            type: 'error'
        })
    }
}

// 注册
const registerFunc = async () => {
    let result = await registerApi(ruleForm) as any
    if (result.code === 200) {
        ElMessage({
            message: '注册成功',
            type: 'success'
        })
        titleText.value = !titleText.value

    } else {
        ElMessage({
            message: `注册失败: ${result.msg}}`,
            type: 'error'
        })
    }
}

const register = (formEl: FormInstance | undefined) => {
    titleText.value = !titleText.value
    if (!formEl) return
    formEl.resetFields()
}


</script>

<style lang="scss" scoped>
.login-page {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-warp {
    position: absolute;
    // display: flex;
    width: 500px;
    height: 320px;
    margin: 0 auto;
    background-color: #1c1c1c76;
    border-radius: 4px;
    color: red;

    .title {
        text-align: center;
        letter-spacing: 8px;
        font-size: 24px;

    }

    .el-form {
        margin: 0 auto;

        :deep(.el-form-item__content) {
            justify-content: center;
        }
    }
}
</style>